import React from 'react'
import { Color } from '../model/color'

interface Props {
    color:Color;
    onColorUpdated:(color:Color) => void;
}

const updataColor = 
(props:Props,colorId:keyof Color) => 
    (value:any) => {
        props.onColorUpdated({
            ...props.color,
            [colorId]:value
        })
}

const ColorPicker:React.FC<Props> = (props) => {
    return (
        <div>
            <ColorSliderComponents 
                value={props.color.red}
                onValueUpdated={updataColor(props,"red")}
            />
            <br/>
            <ColorSliderComponents 
                value={props.color.green}
                onValueUpdated={updataColor(props,"green")}
            />
            <br/>
            <ColorSliderComponents 
                value={props.color.blue}
                onValueUpdated={updataColor(props,"blue")}
            />
        </div>
    )
}

interface PropsColorSlider {
    value:number;
    onValueUpdated: (newValue:number) => void;
}

const ColorSliderComponents:React.FC<PropsColorSlider> = (props) => {
    return (
        <div>
            <input
                type="range"
                min="0"
                max="255"
                value={props.value}
                onChange={(event) => props.onValueUpdated(+event.target.value)}
            />
            {props.value}
        </div>
    )
}
export default ColorPicker